<script setup lang="ts">

import {HeadModify} from "@/http/Personal center";
import {ref} from "vue";
import {useCounterStore} from "@/stores/SaveUser";
import {useRoute} from "vue-router";

let baseUrl = 'http://192.168.5.120:8090'
const headimagep=useCounterStore()
const Path=ref('')
// const routerPass=useRoute()
const image=ref('')
// let picture=routerPass.query.src
const afterRead = (file) => {
    // 此时可以自行将文件上传至服务器
    console.log(file.file);
    HeadModify(file.file).then(res => {
        // console.log(res)
        // console.log(res.imgUrl)
        // console.log(res.imgUrl.substring(34))
        Path.value=res.imgUrl.substring(34)
        image.value=Path.value
        // console.log(baseUrl+Path.value)
        headimagep.headimage=baseUrl+Path.value
        // console.log(headimagep.headimage)
    })
};

</script>

<template>
    <div>
        <div id="beijing">
            <router-link to="/bianjiziliao">
            <van-nav-bar
                    left-arrow
            />
            </router-link>
            <van-image
                    width="98%"
                    height="300"
                    :src="headimagep.headimage"
            />
            <div class="one">
                <van-uploader :after-read="afterRead" >
                    <van-button type="primary" >更换头像</van-button>
                </van-uploader>
            </div>

    </div>
</div>
</template>

<style scoped lang="less">
#beijing{
    background-color: #f4f4f4;
    height: 600px;
    :deep(.van-nav-bar__content){
        background-color: #f4f4f4;
    }
    :deep(.van-image__img){
        margin-left: 3px;
    }
    .one{
        text-align: center;
        margin-top: 30px;
    }
}
</style>